import React from "react";
import todoListStore from "../../store/todoListStore";
import { observer } from "mobx-react";

function Main() {
  const { todoList } = todoListStore;
  const handle1 = (id: number) => {
    return () => {
      todoListStore.checkedList(id);
    };
  };
  const handle2 = (id: number) => {
    return () => {
      todoListStore.delList(id);
    };
  };
  return (
    <ul className="todo-main">
      {todoList.map((todo) => {
        return (
          <li key={todo.id}>
            <label>
              <input type="checkbox" checked={todo.isDone} onChange={handle1(todo.id)} />
              <span>{todo.todoName}</span>
            </label>
            <button className="btn btn-danger" onClick={handle2(todo.id)}>
              删除
            </button>
          </li>
        );
      })}
    </ul>
  );
}
export default observer(Main);
